<template>
  <q-modal v-model="opened" :content-css="{minWidth: '40vw', minHeight: '50vh'}" @hide="close" @show="show">
    <q-modal-layout>
      <q-toolbar slot="header">
        <q-btn flat round dense @click="opened = false" icon="reply"/>
        <q-toolbar-title>新增发布</q-toolbar-title>
      </q-toolbar>
      <q-toolbar slot="footer">
        <q-btn flat @click.native="submit">提交</q-btn>
      </q-toolbar>
      <div class="row q-ma-sm flex-center">
        <q-list highlight inset-separator class="bg-blue-grey-1">
          <q-list-header>机器运行情况</q-list-header>
          <q-item multiline v-for="i in host.items" :key="i.id">
            <q-item-side :avatar="i.avatar" />
            <q-item-main :label="i.label" label-lines="1" style="width:280px;"
              :sublabel="i.version" sublabel-lines="2"/>
          </q-item>
        </q-list>
      </div>
      <div class="row q-ma-lg">
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-select class="q-ma-sm" :error="$v.fields.version.$error" separator :options="build.items"
                    :float-label="$v.fields.version.$error ? '请输选择项目包' : '项目包'" v-model="fields.version"/>
        </div>
        <!--<div class="col-xs-12 col-sm-12 col-md-12">-->
          <!--<q-datetime class="q-ma-sm" :first-day-of-week="1" format="YYYY-MM-DD HH:mm" v-model="fields.planTime"-->
                      <!--float-label="计划时间" :clearable="true" type="datetime" />-->
        <!--</div>-->
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-select class="q-ma-sm" :error="$v.fields.host.$error" separator :options="host.items" clearable chips
            multiple :float-label="$v.fields.host.$error ? '请输选择主机' : '发布主机'" v-model="fields.host"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
          <q-input class="q-ma-sm" type="textarea" v-model="fields.mem" float-label="备注"/>
        </div>
      </div>
    </q-modal-layout>
    <q-inner-loading :visible="visible">
      <q-spinner-gears size="50px" color="primary" />
    </q-inner-loading>
  </q-modal>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  name: 'NewPublish',
  data: function () {
    return this.$store.state.newPublish
  },
  validations: {
    fields: {
      version: { required },
      host: { required }
    }
  },
  props: {
    newPublishDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: String,
      default: ''
    }
  },
  methods: {
    show () {
      this.visible = true
      Promise.all([
        this.$store.dispatch('newPublish/loadPackage', this.$route.params.projectId),
        this.$store.dispatch('newPublish/loadHost', this.$route.params.projectId)])
        .then((result) => {
          this.visible = false
        }).catch((error) => {
          this.visible = false
          console.log(error)
        })
    },
    close () {
      this.$store.commit('newPublish/reset')
      this.$emit('clsNewPublish')
    },
    submit () {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.dispatch('newPublish/save', this.$route.params.projectId)
    }
  },
  watch: {
    newPublishDialog () {
      this.opened = this.newPublishDialog
    }
  }
}
</script>

<style>
</style>
